<template>
  <div>
    <div class="top">
      <span
        class="iconfont icon-arrowRight-copy-copy"
        @click="$router.go(-1)"
      ></span>
      分类
      <span
        class="iconfont icon-sousuo"
        @click="$router.push('/search')"
      ></span>
    </div>

    <div class="boybook">
      <p>男生小说</p>
      <ul class="boylist">
        <li
          v-for="(item, index) in boylabels"
          :key="index"
          @click="add"
        >
          {{ item.name }}
        </li>
        <li class="zjz">终结者2游戏同人</li>
      </ul>
    </div>

    <div class="boybook">
      <p>女生小说</p>
      <ul class="boylist" v-if="grillablist">
        <li v-for="(item, index) in grillablist" :key="index" 
        @click="add">
          {{ item.name }}
        </li>
      </ul>
    </div>

    <div class="boybook" v-if="booklists">
      <p>图书书库</p>
      <ul class="boylist">
        <li v-for="(item, index) in booklists" :key="index" @click="add">{{ item.name }}</li>
      </ul>
    </div>

    <!-- 底部组件 -->
    <buttom-nav></buttom-nav>
  </div>
</template>

<script>
import buttomNav from "../components/base/buttomNav.vue";
import {
  // storeNode,
  storeNodeList,
  girlNodeList,
  storeBook,
  // storeInfo,
} from "../api/res";

export default {
  data() {
    return {
      active: 0,
      boylabels: [],
      grillablist: "",
      booklists: "",
      intext:null,
    };
  },
  methods: {
    add(event){
      this.intext = event.target.innerText
      console.log(this.intext);
      this.$router.push({ path:'/sortbook',query:{list:this.intext} })
      
    },
    // getSeachFun() {
    //   //{search}
      
    // },
  },
  created() {
    // this.getSeachFun();
    // storeInfo().then((data) => {
    //   console.log(data);
    // });
    //所有频道
    // storeNode().then((data) => {
    //   console.log(data);
    // });
    //男生分类列表
    storeNodeList().then((data) => {
      // console.log(data);
      var labels = data.list[0].labels;
      this.boylabels = labels;
      // console.log(this.boylabels);
    });
    //女生分类列表
    girlNodeList().then((data) => {
      // console.log(data.list[0].labels);
      var grillabels = data.list[0].labels;
      this.grillablist = grillabels;
    });
    //图书书库
    storeBook().then((data) => {
      // console.log(data.list[0].labels);
      var booklist = data.list[0].labels;
      this.booklists = booklist;
    });
  },
  components: {
    buttomNav,
  },
};
</script>

<style lang="less">
div {
  // background-color: #f3f3f3;
  .top {
    width: 100%;
    font-size: 25px;
    font-weight: bold;
    text-align: center;
    line-height: 50px;
    background-color: white;
    border-bottom: 1px solid gainsboro;
    .icon-arrowRight-copy-copy {
      font-size: 25px;
      float: left;
      padding-left: 10px;
    }
    .icon-sousuo {
      font-size: 25px;
      float: right;
      // margin-left: -10px;
      margin-right: 20px;
    }
  }
  .boybook {
    background-color: white;
    border-bottom: 7px solid #f3f3f3;
    p {
      line-height: 50px;
      margin-left: 10px;
      font-size: 18px;
      font-weight: bold;
      color: #ed6460;
    }
    .boylist {
      display: flex;
      justify-content: space-around;
      flex-wrap: wrap;
      margin-left: 20px;
      width: 315px;
      li {
        width: 80px;
        height: 25px;
        //   border: 1px solid black;
        background-color: #f5f5f5;
        border-radius: 10px;
        text-align: center;
        line-height: 25px;
        margin-bottom: 20px;
        margin-left: 15px;
        // padding-left: 10px;
      }
      .zjz {
        width: 80px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }
  }
}
</style>